window.onload = function () {
    // console.log("事件加载了");
    //全局变量数组 用来获取对象
    let arr = [];
    //#region 获取数据渲染页面
    getStudentList();
    function getStudentList() {
        axios.get("/student/list").then(result => {
            // console.log(result);
            arr = result.data;
            const html = arr.map((value, index) => `   
            <tr>
                <th scope="row">${value.id}</th>
                <td>${value.name}</td>
                <td>${value.age}</td>
                <td>${value.sex}</td>
                <td>${value.group}</td>
                <td>${value.phone}</td>
                <td>${value.salary}</td>
                <td>${value.truesalary}</td>
                <td>${value.province + value.city + value.county}</td>
                <td>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#updateModal" 
                    data-index="${index}"
                    id="studentUpdate">修改</button>
                    <button type="button" class="btn btn-danger btn-sm" data-id="${value.id}" id="delBtn">删除</button>
                </td>
            </tr>
            
            `).join("");
            document.querySelector("tbody").innerHTML = html;
        })
    }
    //#endregion

    //#region 表单验证 
    function test() {
        return {
            fields: {
                //姓名
                name: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '姓名不能为空'
                        },
                        stringLength: {   //检测长度
                            min: 2,
                            max: 15,
                            message: '姓名需要2~15个字符'
                        }
                    }
                },

                //年龄
                age: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '姓名不能为空'
                        },
                        greaterThan: {
                            value: 18,
                            message: '年龄不能小于18岁'
                        },
                        lessThan: {
                            value: 60,
                            message: '年龄不能大于60岁'
                        }
                    }
                },

                //组号
                group: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '组号不能为空'
                        }
                    }
                },

                //手机号
                phone: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                            message: '手机号格式错误'
                        }
                    }
                },

                //期望薪资
                salary: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '期望薪资不能为空'
                        },
                        greaterThan: {
                            value: 800,
                            message: '期望薪资不能小于800块'
                        },
                        lessThan: {
                            value: 10000000000000,
                            message: '期望薪资不能大于10000000000000块'
                        }
                    },
                },

                //实际薪资
                truesalary: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '实际薪资不能为空，最多5位数'
                        },
                        lessThan: {
                            value: 100000,
                            message: '实际薪资不能大于100000块，你在吹什么牛逼'
                        }
                    },
                },

                //省份
                province: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '省份不能为空'
                        }
                    }
                },
                //市
                city: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '市不能为空'
                        }
                    }
                },
                //县
                county: {
                    validators: {
                        notEmpty: {   //不能为空
                            message: '县不能为空'
                        }
                    }
                },

            }
        }
    }
    //#endregion

    //#region 添加学员
    // 语法：
    // $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

    // 比如，注册
    $('.add-form').bootstrapValidator(test()).on('success.form.bv', function (e) {
        e.preventDefault();
        //所有工作准备完毕  准备添加
        console.log("准备添加");
        //使用jq序列化方法，获取表单内容
        const form = $('.add-form').serialize();
        // console.log(form);
        //发送请求添加到数据中
        axios.post("/student/add", form).then(result => {
            // console.log(result);
            //添加成功后渲染页面
            getStudentList();
            //关闭模态框
            $('#addModal').modal('hide');
        })
    })

    //点击添加学员后  重置模态框
    document.querySelector("#studentAdd").addEventListener("click", function () {
        //原生的form表单 有一个方法reset重置表单
        //按钮自己也有一个属性 type = reset可以重置表单功能
        document.querySelector(".add-form").reset();
    })
    //#endregion

    //#region 修改、删除学员
    const tbody = document.querySelector("tbody");
    tbody.addEventListener("click", function (event) {
        // console.log(event.target.id);
        //点击编辑按钮    
        if (event.target.id === 'studentUpdate') {
            // console.log('修改键被点击了');
            // console.log(arr);        
            // console.log(arr[index]); 
            const { index } = event.target.dataset;
            // //把获取到的数据显示到表单中
            // const name = document.querySelector(".update-form [name=name]");
            // const id = document.querySelector(".update-form [name=id]");
            // const age = document.querySelector(".update-form [name=age]");
            // const group = document.querySelector(".update-form [name=group]");
            // //获取到性别数组
            // const sexs = document.querySelectorAll(".update-form [name=sex]");
            // const phone = document.querySelector(".update-form [name=phone]");
            // const salary = document.querySelector(".update-form [name=salary]");
            // const truesalary = document.querySelector(".update-form [name=truesalary]");
            // const province = document.querySelector(".update-form [name=province]");
            // const city = document.querySelector(".update-form [name=city]");
            // const county = document.querySelector(".update-form [name=county]");
            // id.value = arr[index].id;
            // name.value = arr[index].name;
            // age.value = arr[index].age;
            // group.value = arr[index].group;
            // //当前数组性别
            // let sex = arr[index].sex;
            // if (sex === "女") {
            //     sexs[0].checked = false;
            //     sexs[1].checked = true;
            // } else {
            //     sexs[0].checked = true;
            //     sexs[1].checked = false;
            // }
            // phone.value = arr[index].phone;
            // salary.value = arr[index].salary;
            // truesalary.value = arr[index].truesalary;

            // province.innerHTML =`<option>${arr[index].province}</option>`;
            // city.innerHTML = `<option value="">${arr[index].city}</option>`;
            // county.innerHTML = `<option value="">${arr[index].county}</option>`;

            // //获取省
            // axios.get("/geo/province").then(result => {
            //     // console.log(result);
            //     //渲染成省份的数据
            //     let html = `<option value="">${arr[index].province}</option>`;
            //     result.forEach((value) => (html += `
            //     <option value="${value}">${value}</option>
            //     `));
            //     province.innerHTML = html;
            // });
            // //给省级下拉列表设置一个change事件 
            // province.addEventListener("change", function () {

            //     //当我们没有选中省的时候  重置市、县 不在发送请求

            //     city.innerHTML = `<option value="">--市--</option>`;
            //     county.innerHTML = `<option value="">--县--</option>`;

            //     //获取当前选中的省份  根据接口要求 发送网络获取对应的市的数据
            //     // console.log(this.value);
            //     axios.get("/geo/city", { params: { pname: this.value } }).then(result => {
            //         // console.log(result);
            //         //渲染成市份的数据
            //         let html = `<option value="">--市--</option>`;
            //         result.forEach((value) => (html += `
            // <option value="${value}">${value}</option>
            // `));
            //         city.innerHTML = html;
            //     })
            // });

            // //给市级下拉列表设置一个change事件 
            // city.addEventListener("change", function () {

            //     //当我们没有选中市的时候  重置市、县 不在发送请求
            //     if (!this.value) {
            //         county.innerHTML = `<option value="">--县--</option>`;
            //         return;
            //     }

            //     //获取当前选中的市  根据接口要求 发送网络获取对应的县的数据
            //     // console.log(this.value);
            //     axios.get("/geo/county", { params: { pname: province.value, cname: city.value } }).then(result => {
            //         // console.log(result);
            //         //渲染成县的数据
            //         let html = `<option value="">--县--</option>`;
            //         result.forEach((value) => (html += `
            // <option value="${value}">${value}</option>
            // `));
            //         county.innerHTML = html;
            //     })
            // });

            //id

            getStudentList();
            renderProvinces();
            //获取 复选框数组
            let inputChecked = document.querySelectorAll(".update-form input[name=sex]");
            const updateModalID = (document.querySelector(
                ".update-form input[name=id]"
            ).value = arr[index].id);


            //姓名
            document.querySelector(".update-form input[name=name]").value =
                arr[index].name;
            //年龄
            document.querySelector(".update-form input[name=age]").value =
                arr[index].age;
            //组号
            document.querySelector(".update-form select[name=group]").value =
                arr[index].group;
            //性别
            const sex = arr[index].sex;
            // console.log(sex);


            if (sex === "女") {
                inputChecked[0].checked = false;
                inputChecked[1].checked = true;
            } else {
                inputChecked[0].checked = true;
                inputChecked[1].checked = false;
            }
            //手机号
            document.querySelector(".update-form input[name=phone]").value =
                arr[index].phone;
            //期望薪资
            document.querySelector(".update-form input[name=salary]").value =
                arr[index].salary;
            //实际薪资
            document.querySelector(".update-form input[name=truesalary]").value =
                arr[index].truesalary;


            //省
            document.querySelector(
                ".update-form select[name=province]"
            ).innerHTML = `<option>${arr[index].province}</option>`;
            //市
            document.querySelector(
                ".update-form select[name=city]"
            ).innerHTML = `<option>${arr[index].city}</option>`;
            //县
            document.querySelector(
                ".update-form select[name=county]"
            ).innerHTML = `<option>${arr[index].county}</option>`;


            // 省  市  县  下拉列表
            //#region


            //   1.获取中国的省份
            function renderProvinces() {
                const province = document.querySelector(
                    ".update-form  [name=province]"
                );
                const city = document.querySelector(".update-form  [name=city]");
                const county = document.querySelector(".update-form [name=county]");
                axios.get("/geo/province").then((result) => {
                    //   console.log(result);
                    let html = `<option>${arr[index].province}</option>`;
                    //数组遍历 形成 省 下拉列表
                    result.forEach(
                        (value) => (html += `<option value="${value}">${value}</option>`)
                    );
                    province.innerHTML = html;
                });
                // 2.给省添加下拉列表 change事件
                province.addEventListener("change", function () {
                    // 选中省份  重置市县
                    city.innerHTML = '<option value="">--市--</option>';
                    county.innerHTML = '<option value="">--县--</option>';
                    axios
                        .get("/geo/city", { params: { pname: this.value } })
                        .then((result) => {
                            //   console.log(result);
                            let html = '<option value="">--市--</option>';
                            //数组遍历 形成 市 下拉列表
                            result.forEach(
                                (value) =>
                                    (html += `<option value="${value}">${value}</option>`)
                            );
                            city.innerHTML = html;
                        });
                });
                // 3.给市添加下拉列表 change事件
                city.addEventListener("change", function () {
                    //   console.log(this.value);
                    if (!this.value) {
                        //判断如果没有选中什么省
                        //就重置  市 县
                        county.innerHTML = '<option value="">--县--</option>';
                        return;
                    }
                    axios
                        .get("/geo/county", {
                            params: { pname: province.value, cname: city.value },
                        })
                        .then((result) => {
                            console.log(result);
                            let html = '<option value="">--县--</option>';
                            //数组遍历 形成 市 下拉列表
                            result.forEach(
                                (value) =>
                                    (html += `<option value="${value}">${value}</option>`)
                            );
                            county.innerHTML = html;
                        });
                });
            }

            //点击确认修改 修改数据


            $('.update-form').bootstrapValidator(test()).on('success.form.bv', function (e) {
                e.preventDefault();
                //所有工作准备完毕  准备添加
                console.log("准备修改");
                //使用jq序列化方法，获取表单内容
                const form = $('.update-form').serialize();
                // console.log(form);
                //发送请求添加到数据中
                axios.put("/student/update", form).then(result => {
                    // console.log(result);
                    //添加成功后渲染页面
                    getStudentList();
                    //关闭模态框
                    $('#updateModal').modal('hide');
                })
            })
        }

        //删除学员
        if (event.target.id === 'delBtn') {
            console.log("准备删除");
            // const id = arr[index].id;
            const { id } = event.target.dataset;
            if (confirm("您确定要删除么？😍")) {
                axios.delete("/student/delete", { params: { id } }).then(result => {
                    console.log(result);
                    getStudentList();
                })
            }
        }
    })
    //#endregion


    //#region 新增学院 省市级联功能
    renderPosition();
    function renderPosition() {
        const province = document.querySelector(".add-form [name=province]");
        const city = document.querySelector(".add-form [name=city]");
        const county = document.querySelector(".add-form [name=county]");
        //获取省的数据
        axios.get("/geo/province").then(result => {
            // console.log(result);
            //渲染成省份的数据
            let html = `<option value="">--省--</option>`;
            result.forEach((value) => (html += `
            <option value="${value}">${value}</option>
            `));
            province.innerHTML = html;
        });

        //给省级下拉列表设置一个change事件 
        province.addEventListener("change", function () {

            //当我们没有选中省的时候  重置市、县 不在发送请求
            if (!this.value) {
                city.innerHTML = `<option value="">--市--</option>`;
                county.innerHTML = `<option value="">--县--</option>`;
                return;
            }

            //获取当前选中的省份  根据接口要求 发送网络获取对应的市的数据
            // console.log(this.value);
            axios.get("/geo/city", { params: { pname: this.value } }).then(result => {
                // console.log(result);
                //渲染成市份的数据
                let html = `<option value="">--市--</option>`;
                result.forEach((value) => (html += `
            <option value="${value}">${value}</option>
            `));
                city.innerHTML = html;
            })
        });

        //给市级下拉列表设置一个change事件 
        city.addEventListener("change", function () {

            //当我们没有选中市的时候  重置市、县 不在发送请求
            if (!this.value) {
                county.innerHTML = `<option value="">--县--</option>`;
                return;
            }

            //获取当前选中的市  根据接口要求 发送网络获取对应的县的数据
            // console.log(this.value);
            axios.get("/geo/county", { params: { pname: province.value, cname: city.value } }).then(result => {
                // console.log(result);
                //渲染成县的数据
                let html = `<option value="">--县--</option>`;
                result.forEach((value) => (html += `
            <option value="${value}">${value}</option>
            `));
                county.innerHTML = html;
            })
        });
    }
    //#endregion

}